figure.gallery-group
  position: relative
  float: left
  overflow: hidden
  margin: .3rem .2rem
  width: calc(50% - .4rem)
  height: 250px
  border-radius: 8px
  background: $dark-black
  -webkit-transform: translate3d(0, 0, 0)

  +maxWidth600()
    width: calc(100% - .4rem)

  &:hover
    img
      opacity: .4
      transform: translate3d(0, 0, 0)

    .gallery-group-name::after
      transform: translate3d(0, 0, 0)

    p
      opacity: 1
      transform: translate3d(0, 0, 0)

  img
    position: relative
    margin: 0 !important
    max-width: none
    width: calc(100% + 20px)
    height: 250px
    backface-visibility: hidden
    opacity: .8
    transition: opacity .35s, transform .35s
    transform: translate3d(-10px, 0, 0)
    object-fit: cover

  figcaption
    position: absolute
    top: 0
    left: 0
    padding: 1.5rem
    width: 100%
    height: 100%
    color: $gallery-color
    text-transform: uppercase
    backface-visibility: hidden

    & > a
      position: absolute
      top: 0
      right: 0
      bottom: 0
      left: 0
      z-index: 1000
      opacity: 0

  p
    @extend .limit-more-line
    margin: 0
    padding: .4rem 0 0
    letter-spacing: 1px
    font-size: 1.1em
    line-height: 1.5
    opacity: 0
    transition: opacity .35s, transform .35s
    transform: translate3d(100%, 0, 0)
    -webkit-line-clamp: 4

  .gallery-group-name
    @extend .limit-more-line
    position: relative
    margin: 0
    padding: .4rem 0
    font-weight: bold
    font-size: 1.65em
    line-height: 1.5
    -webkit-line-clamp: 2

    &:after
      position: absolute
      bottom: 0
      left: 0
      width: 100%
      height: 2px
      background: $gallery-color
      content: ''
      transition: transform .35s
      transform: translate3d(-100%, 0, 0)

.gallery-group-main
  overflow: auto
  padding: 0 0 .8rem

.justified-gallery
  margin: 0 0 .8rem

  img
    opacity: 0

  .img-alt
    display: none

  .fancybox
    width: auto
    text-align: inherit